<template>
  <el-dialog
    v-el-drag-dialog
    width="800px"
    :title="formName"
    :visible="show"
    @update:visible="updateShow"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="130px"
    >
      <el-form-item label="方案名称" prop="Sname">
        <el-input v-model="form.Sname" style="width: 500px" />
      </el-form-item>
      <!-- <el-form-item label="生效时间" prop="timeValue">
        <el-date-picker
          style="width: 500px"
          class="flex-1"
          v-model="form.timeValue"
          value-format="yyyy-MM-dd hh:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="身份类型" prop="idType">
        <el-select v-model="idType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="考核类型" prop="Examine">
        <el-radio-group v-model="form.Examine" style="width: 500px">
          <el-radio
            v-for="cell of dealTypeOption"
            :label="cell.value"
            :key="cell.value"
            >{{ cell.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="考核金额" prop="Condition">
        <el-input
          style="width: 500px"
          type="number"
          class="sortInput"
          v-model="form.Standard"
          placeholder=""
          min="0"
          @keyup.native="proving2($event)"
          ><template slot="append">元</template></el-input
        >
      </el-form-item>
      <!-- <el-form-item label="考核条件" prop="Condition">
        <el-input
          style="width: 500px"
          type="number"
          class="sortInput"
          v-model="form.Condition"
          placeholder=""
          min="0"
          ><template slot="append">%</template></el-input
        >
      </el-form-item>
      <el-form-item label="返还费用百分比" prop="Refund">
        <el-input
          style="width: 500px"
          type="number"
          class="sortInput"
          v-model="form.Refund"
          placeholder=""
          min="0"
          ><template slot="append">%</template></el-input
        >
      </el-form-item> -->
      <el-form-item label="备注" prop="Remark">
        <el-input
          style="width: 500px"
          class="flex-1"
          type="textarea"
          placeholder="请输入内容"
          v-model="form.Remark"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="m-t-1 m-b-1 float_none">
      <el-button class="float_right" @click="addladderArray"
        >新增档次</el-button
      >
    </div>
    <div class="auto-scroll">
      <div class="flex m-t-1 align-center space-between ladder_item">
        <div class="flex-1">
          <div
            class="flex align-center space-between ladder_cell"
            v-for="(cell, idx) of form.Settings"
            :key="idx"
          >
            <i
              class="el-icon-circle-close m-r-1"
              @click="deleteladderArray(idx)"
            ></i>
            <div class="m-r-2">
              <div class="flex align-center">
                <el-input
                  class="ladder_SName"
                  v-model="cell.Sname"
                  placeholder="档次名"
                ></el-input>
              </div>
            </div>
            <div class="info_group">
              <div class="flex align-center">
                <span class="tit_span nowarp">达标百分比：</span>
                <el-input
                  type="number"
                  v-model="cell.Condition"
                  min="0"
                  @keyup.native="proving2($event, '%')"
                  class="flex-1"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
              <div class="flex align-center">
                <span class="tit_span nowarp">返还百分比：</span>
                <el-input
                  type="number"
                  v-model="cell.Refund"
                  class="flex-1"
                  min="0"
                  @keyup.native="proving2($event, '%')"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updateShow(false)"> 取消 </el-button>
      <el-button type="primary" @click="save"> 保存 </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { deepClone } from '@/utils'
import { saveTechCostSetting } from '@/api/system/tech-cost-setting'
import { mapState } from 'vuex'

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default () {
        return false
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      idType: 1,
      typeOptions: [
        { label: '付款淘客（创客）', value: 1 },
        { label: '机构身份（服务商）', value: 2 },
      ],

      form: {},
      formTmpl: {
        "Id": "00000000-0000-0000-0000-000000000000", //新增：00000000-0000-0000-0000-000000000000，则为修改
        "SName": "0", //方案名称
        "Examine": [], //是否考核直营，页面显示设置：｛True 个人直营、False 团队直营｝
        "Standard": 0, //考核金额
        "Remark": "", //备注
        "Settings": [
          {
            "Id": "00000000-0000-0000-0000-000000000000", //新增：00000000-0000-0000-0000-000000000000，则为修改
            "Sname": "", //方案名称
            "Condition": 0, //达标百分比
            "Refund": 0, //返还百分比
            "SerialNum": 1,
          }
        ]
      },
      rules: {
        Sname: [
          { required: true, message: '名称必填', trigger: 'blur' },
          { min: 1, max: 50, message: '名称长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        Examine: [
          { required: true, message: '请至少选择一个', trigger: ['change', 'blur'] },
        ]
        // timeValue: [
        //   { required: true, message: '时间必填', trigger: 'blur' },
        // ]
      }
    }
  },
  computed: {
    formName () {
      if (this.form.Id) {
        return '编辑'
      }
      return '新增'
    },
    ...mapState({
      userId: state => state.user.id,
    }),
    dealTypeOption () {
      switch (this.idType) {
        case 1:
          return [
            { label: '个人直营销售总额', value: 1 },
            { label: '直属团队直营销售总额', value: 2 },
          ]
        case 2:
          return [
            { label: '团队销售总额', value: 3 },
          ]
      }

    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        this.form = deepClone({ ...this.formTmpl, ...val })
        if (val.Examine) {
          if (val.Examine == 3) {
            this.idType = 2
          } else {
            this.idType = 1
          }
          this.form.Examine = Number(val.Examine)
        }
        // if (this.form.StartTime) {
        //   // this.form.timeValue = [this.form.StartTime, this.form.EndTime]
        //   // this.$set(this.form, 'timeValue', [this.form.StartTime, this.form.EndTime])
        // }
      }
    },
    idType (e) {
      if (this.form.Id) {
        this.form.Examine = Number(this.formData.Examine)
      } else {
        this.form.Examine = ''
      }

    }
  },
  methods: {
    updateShow (val) {
      this.$emit('update:show', val)
    },
    afterSave () {
      this.$notify({
        title: '操作成功',
        message: 'success',
        type: 'success',
        duration: 2000
      })
      this.updateShow(false)
      this.$emit('finish')
    },
    save () {
      this.$refs['dataForm'].validate((valid) => {
        const formData = deepClone(this.form)

        formData.UserId = this.userId
        // formData.StartTime = this.form.timeValue[0]
        // formData.EndTime = this.form.timeValue[1]
        // delete formData['timeValue']
        if (valid) {
          if (this.form.Id) {
            saveTechCostSetting(formData).then(() => {
              this.afterSave()
            })
          } else {
            saveTechCostSetting(formData).then(() => {
              this.afterSave()
            })
          }
        }
      })
    },
    addladderArray () {
      let num = this.form.Settings.length
      this.form.Settings.push({
        "Id": "00000000-0000-0000-0000-000000000000", //新增：00000000-0000-0000-0000-000000000000，则为修改
        "Sname": "", //方案名称
        "Condition": 0, //达标百分比
        "Refund": 0, //返还百分比
        "SerialNum": num + 1,
      })
    },
    deleteladderArray (index) {
      this.form.Settings.splice(index, 1)
    }
  }
}
</script>
<style  scoped>
.info_group {
  width: 65%;
}
/* .promoteB >>> .el-dialog {
  min-width: 560px;
} */

.ladder_item {
  width: 95%;
  border-bottom: 1px solid #cecece;
  padding: 5px 0;
}
.ladder_cell + .ladder_cell {
  border-top: 2px dashed #f6bcbc;
}
.ladder_cell {
  padding: 5px 0;
}
.ladder_name {
  /* width: 100px !important; */
  margin-right: 3%;
}

.el-icon-circle-close {
  font-size: 18px;
  transition: color 0.25s linear;
}
.el-icon-circle-close:hover {
  color: #cecece;
  cursor: pointer;
}
.table_ladname {
  width: 30%;
  font-size: 16px;
}
</style>>

</style>
